<template>

    <a-form ref="formRef" name="custom-validation" :model="formState" v-bind="layout" @finish="handleFinish">
        <a-row>
            <a-col :span="4">
                <a-form-item has-feedback label="客户姓名" name="cust_id">
                    <a-select allowClear v-model:value="formState.cust_id">
                        <a-select-option :value="item.key" v-for="item in customerList" :key="item.key">{{
                            item.name
                            }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>

            <a-col :span="4">
                <a-form-item has-feedback label="预约项目" name="project_id">
                    <a-select allowClear v-model:value="formState.project_id">
                        <a-select-option :value="item.key" v-for="item in projectList" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>

            <a-col :span="6">
                <a-form-item :wrapper-col="{ span: 24, offset: 0 }" :labelCol="{ span: 0 }" has-feedback label="预约时间"
                    name="appoint_time">
                    <a-range-picker format="YYYY-MM-DD HH:mm:ss" show-time value-format="YYYY-MM-DD HH:mm:ss"
                        v-model:value="formState.appoint_time" />
                </a-form-item>
            </a-col>
            <a-col :span="4">
                <a-form-item has-feedback label="预约医生" name="emp_id">
                    <a-select allowClear v-model:value="formState.emp_id">
                        <a-select-option :value="item.key" v-for="item in employeeList" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :span="4">
                <a-form-item has-feedback label="预约状态" name="status">
                    <a-select allowClear v-model:value="formState.status">
                        <a-select-option :value="item.key" v-for="item in appointmentStatusList" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>


            <a-col :span="2">
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" html-type="submit">查询</a-button>
                    <!-- <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button> -->
                </a-form-item>
            </a-col>
        </a-row>

        <a-row>
            <a-col :span="24">
                <a-flex justify="flex-end">
                    <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button>
                </a-flex>
            </a-col>
        </a-row>
    </a-form>


    <a-row>
        <a-col :span="24">
            <a-table size="small" style="width: 100%;" :columns="columns" :data-source="data">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'name'">
                        <a>{{ text }}</a>
                    </template>
                    <template v-if="column.dataIndex === 'action'">
                        <a type="primary" @click="handleEdit(record)">编辑</a>
                        <a type="danger" @click="handleDelete(record)">删除</a>
                    </template>
                </template>
            </a-table>
        </a-col>
    </a-row>

    <a-row>
        <a-drawer v-model:open="open" class="custom-class" size="large" root-class-name="root-class-name"
            style="color: red" :title="addFormState.appoint_id ? '编辑' : '新增'" placement="right">
            <a-form :rules="addRulesForm" ref="addFormRef" name="custom-validation" :model="addFormState"
                v-bind="layout" @finish="addFormState.appoint_id ? handleEditFinish($event) : handleAddFinish($event)">

                <a-form-item has-feedback label="客户姓名" name="cust_id">
                    <a-select v-model:value="addFormState.cust_id">
                        <a-select-option :value="item.key" v-for="item in customer" :key="item.key">{{ item.name
                        }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="预约项目" name="project_id">
                    <a-select v-model:value="addFormState.project_id">
                        <a-select-option :value="item.key" v-for="item in project" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="预约医生" name="emp_id">
                    <a-select @change="getAppointmentTimeTable" v-model:value="addFormState.emp_id">
                        <a-select-option :value="item.key" v-for="item in employee" :key="item.key">{{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>


                <!-- 预约时间的分钟我要只能选00分跟30分-->
                <a-form-item has-feedback label="预约时间" name="appoint_time">
                    <a-date-picker :disabledDate="disabledDate" @change="handleTimeChange"
                        :show-time="{ minuteStep: 30 }" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm"
                        style="width: 100%" v-model:value="addFormState.appoint_time" />

                </a-form-item>

                <a-form-item has-feedback label="预约状态" name="status">
                    <a-select v-model:value="addFormState.status">
                        <a-select-option :value="item.key" v-for="item in appointmentStatus" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="备注" name="notes">
                    <a-textarea v-model:value="addFormState.notes" />
                </a-form-item>

                <a-form-item has-feedback>
                    <a-col :span="24">
                        <a-flex justify="flex-end">
                            <a-button type="primary" style="margin-left: 10px" html-type="submit">保存</a-button>
                        </a-flex>
                    </a-col>
                </a-form-item>
            </a-form>
        </a-drawer>
    </a-row>
</template>
<script setup>
import { appointment as service } from '@/api/modulesApi/appointment'
import { message } from 'ant-design-vue'
import { reactive, ref } from 'vue';
import dayjs from 'dayjs';
// 获取客户信息
const customer = ref([])
const getCustomer = async () => {
    const res = await service.getCustomer()
    customer.value = res.data
}
getCustomer()

// 获取项目信息
const project = ref([])
const getProject = async () => {
    const res = await service.getProject()
    project.value = res.data
}
getProject()

// 获取员工信息
const employee = ref([])
const getEmployee = async () => {
    const res = await service.getEmployee()
    employee.value = res.data
}
getEmployee()

// 获取预约状态
const appointmentStatus = ref([])
const getAppointmentStatus = async () => {
    const res = await service.getAppointmentStatus()
    appointmentStatus.value = res.data
}
getAppointmentStatus()

// 获取查询项客户信息
const customerList = ref([])
const getCustomerList = async () => {
    const res = await service.getCustomerList()
    customerList.value = res.data
}
getCustomerList()

// 获取查询项项目列表
const projectList = ref([])
const getProjectIdList = async () => {
    const res = await service.getProjectIdList()
    projectList.value = res.data
}
getProjectIdList()

// 获取查询项员工列表
const employeeList = ref([])
const getEmployeeList = async () => {
    const res = await service.getEmployeeList()
    employeeList.value = res.data
}
getEmployeeList()

// 获取查询项预约状态列表
const appointmentStatusList = ref([])
const getAppointmentStatusList = async () => {
    const res = await service.getAppointmentStatusList()
    appointmentStatusList.value = res.data
}
getAppointmentStatusList()

const columns = [
    {
        title: '预约编号',
        dataIndex: 'appoint_id',
        key: 'appoint_id',
    },
    {
        title: '客户',
        dataIndex: 'cust_id',
        key: 'cust_id',
        customRender: ({ text, record }) => {
            return record.cust.cust_name
        }
    },
    {
        title: '预约项目',
        dataIndex: 'project_id',
        key: 'project_id',
        customRender: ({ text, record }) => {
            return record.project.project_name
        }
    },
    {
        title: '预约时间',
        dataIndex: 'appoint_time',
        key: 'appoint_time',
    },
    {
        title: '预约医生',
        dataIndex: 'emp_id',
        key: 'emp_id',
        customRender: ({ text, record }) => {
            return record.emp.emp_name
        }
    },
    {
        title: '预约状态',
        dataIndex: 'status',
        key: 'status',
    },
    {
        title: '备注',
        dataIndex: 'notes',
        key: 'notes',
    },
    {
        title: '创建时间',
        dataIndex: 'create_time',
        key: 'create_time',
    },
    {
        title: '创建人',
        dataIndex: 'creator',
        key: 'creator',
        customRender: ({ text, record }) => {
            return record.creator_name.emp_name
        }
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        scopedSlots: { customRender: 'action' }
    }
];

const data = ref([]);


const formRef = ref();
const formState = reactive({
    cust_id: '',
    project_id: '',
    emp_id: '',
    status: '',
});

const open = ref(false);

const addFormState = reactive({
    cust_id: '',
    project_id: '',
    emp_id: '',
    status: '',
    notes: '',
});
const addFormRef = ref();

const addRulesForm = {
    cust_id: [{ required: true, message: '请选择客户' }],
    project_id: [{ required: true, message: '请选择预约项目' }],
    appoint_time: [{ required: true, message: '请选择预约时间' }],
    emp_id: [{ required: true, message: '请选择预约医生' }],
    status: [{ required: true, message: '请选择预约状态' }],
};

const handleAdd = () => {
    addFormState.appoint_id = ''
    addFormState.cust_id = ''
    addFormState.project_id = ''
    addFormState.appoint_time = ''
    addFormState.emp_id = ''
    addFormState.status = ''
    addFormState.notes = ''

    open.value = true;
};

const handleAddFinish = async (values) => {
    let res = await service.addAppointment(values)
    message.success('新增成功')
    getAppointment()
    addFormRef.value.resetFields();
    open.value = false;
};

const handleEditFinish = async (values) => {
    values.appoint_id = addFormState.appoint_id
    let res = await service.updateAppointment(values)
    message.success('编辑成功')
    getAppointment()
    addFormRef.value.resetFields();
    open.value = false;
}

const handleDelete = async (record) => {
    let res = await service.deleteAppointment({ appoint_id: record.appoint_id })
    message.success('删除成功')
    getAppointment()
}

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};

const handleFinish = (values) => {
    console.log(values);
    getAppointment()
};

const handleEdit = (record) => {
    addFormState.appoint_id = record.appoint_id
    addFormState.cust_id = record.cust_id
    addFormState.project_id = record.project_id
    addFormState.appoint_time = record.appoint_time
    addFormState.emp_id = record.emp_id
    addFormState.status = record.status
    addFormState.notes = record.notes
    open.value = true;
}


const getAppointment = async () => {
    const res = await service.getAppointment(formState)
    data.value = res.data
}

getAppointment()




// 根据医生获取预约时间表
const appointmentTimeTable = ref([])
const getAppointmentTimeTable = async (e) => {
    const res = await service.getAppointmentTimeTable({ emp_id: e })
    appointmentTimeTable.value = res.data
}

// 禁用已预约的时间且今天之后的日期但可以选今天
const disabledDate = (current) => {
    return current < dayjs().startOf('day');
}

const handleTimeChange = (date, dateString) => {
    console.log(date);
    if (date) {
        date = dayjs(date)
        // 将分钟调整为最近的30分钟间隔
        const adjustedDate = date.minute(Math.round(date.minute() / 30) * 30);
        addFormState.appoint_time = adjustedDate.format('YYYY-MM-DD HH:mm');
    }
};
</script>